import React from 'react'
import { Space, Button, Typography, Statistic, Tooltip } from 'antd'
import {
  ZoomInOutlined,
  ZoomOutOutlined,
  FullscreenOutlined,
  ClockCircleOutlined,
  PlayCircleOutlined,
  GroupOutlined
} from '@ant-design/icons'
import { TimelineStatistics } from './types'

const { Text } = Typography

export interface TimelineToolbarProps {
  statistics: TimelineStatistics
  onZoomIn: () => void
  onZoomOut: () => void
  onZoomToFit: () => void
  canZoomIn: boolean
  canZoomOut: boolean
  currentZoomLevel: string
  className?: string
}

/**
 * 时间线工具栏组件
 * 提供缩放控制和统计信息显示
 */
export const TimelineToolbar: React.FC<TimelineToolbarProps> = ({
  statistics,
  onZoomIn,
  onZoomOut,
  onZoomToFit,
  canZoomIn,
  canZoomOut,
  currentZoomLevel,
  className
}) => {
  return (
    <div 
      className={`timeline-toolbar ${className || ''}`}
      style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '8px 16px',
        borderBottom: '1px solid #e8e8e8',
        backgroundColor: '#ffffff',
        minHeight: '48px'
      }}
    >
      {/* 左侧：缩放控制 */}
      <Space size="small">
        <Text strong style={{ marginRight: '8px' }}>缩放:</Text>
        
        <Tooltip title="放大">
          <Button
            type="text"
            icon={<ZoomInOutlined />}
            onClick={onZoomIn}
            disabled={!canZoomIn}
            size="small"
          />
        </Tooltip>
        
        <Tooltip title="缩小">
          <Button
            type="text"
            icon={<ZoomOutOutlined />}
            onClick={onZoomOut}
            disabled={!canZoomOut}
            size="small"
          />
        </Tooltip>
        
        <Tooltip title="适应窗口">
          <Button
            type="text"
            icon={<FullscreenOutlined />}
            onClick={onZoomToFit}
            size="small"
          />
        </Tooltip>
        
        <Text type="secondary" style={{ fontSize: '12px', marginLeft: '8px' }}>
          {currentZoomLevel}
        </Text>
      </Space>
      
      {/* 右侧：统计信息 */}
      <Space size="large">
        <Statistic
          title="总时长"
          value={statistics.totalDuration.toFixed(1)}
          suffix="秒"
          prefix={<ClockCircleOutlined />}
          valueStyle={{ fontSize: '14px', color: '#1890ff' }}
        />
        
        <Statistic
          title="场景数"
          value={statistics.sceneCount}
          suffix="个"
          prefix={<GroupOutlined />}
          valueStyle={{ fontSize: '14px', color: '#52c41a' }}
        />
        
        <Statistic
          title="平均时长"
          value={statistics.averageDuration.toFixed(1)}
          suffix="秒"
          prefix={<PlayCircleOutlined />}
          valueStyle={{ fontSize: '14px', color: '#fa8c16' }}
        />
        
        {statistics.longestScene && (
          <Tooltip title={`最长场景: ${statistics.longestScene.title} (${statistics.longestScene.duration.toFixed(1)}秒)`}>
            <Text type="secondary" style={{ fontSize: '12px' }}>
              最长 {statistics.longestScene.duration.toFixed(1)}s
            </Text>
          </Tooltip>
        )}
        
        {statistics.shortestScene && (
          <Tooltip title={`最短场景: ${statistics.shortestScene.title} (${statistics.shortestScene.duration.toFixed(1)}秒)`}>
            <Text type="secondary" style={{ fontSize: '12px' }}>
              最短 {statistics.shortestScene.duration.toFixed(1)}s
            </Text>
          </Tooltip>
        )}
      </Space>
    </div>
  )
}